<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标在canvas中的位置</title>
    <style>
        body{margin: 0}
        #canvas{
            margin: 50px;
            background: antiquewhite;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    const  ctx=canvas.getContext('2d');

    canvas.addEventListener('mousedown',function(event){
        const {clientX,clientY}=event;
        const {left,top}=canvas.getBoundingClientRect();
        const [x,y]=[clientX-left,clientY-top];
        console.log(x,y);

    })

</script>
</body>
</html>
